﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="site.css">
    <script type="text/javascript" charset="utf8" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" charset="utf8" src="jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="push.min.js"></script>
    <title>ArchestrA Alarms</title>
    <style>
        h1 {
            padding-top: 5px;
            padding-left: 5px;
        }
        table.dataTable tbody tr td {
            border-bottom: 1px solid gray;
        }
        table.dataTable tbody tr.Cat1Ack {
            background-color: rgb(182,137,134);
        }
        table.dataTable tbody tr.Cat1UnAck {
            background-color: red;
        }
        table.dataTable tbody tr.Cat2Ack {
            background-color: rgb(178,179,115);
        }
        table.dataTable tbody tr.Cat2UnAck {
            background-color: yellow;
        }
        table.dataTable tbody tr.Cat3Ack {
            background-color: rgb(140,173,173);
        }
        table.dataTable tbody tr.Cat3UnAck {
            background-color: rgb(0,255,255);
        }
        table.dataTable tbody tr.Cat4Ack {
            background-color: rgb(163,138,163);
        }
        table.dataTable tbody tr.Cat4UnAck {
            background-color: rgb(255,0,255);
        }
    </style>
</head>
<body>
    <main>
        <h1>SCADA System Alarms</h1>
        <br />
        <div id="alarm_container">
            <table id="alarms" class="" style="width:100%">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Priority</th>
                        <th>State</th>
                        <th>TagName</th>
                        <th>Description</th>
                        <th>Value</th>
                        <th>Operator</th>
                    </tr>
                </thead>
            </table>
        </div>
    </main>
    
    <script type="text/javascript">
        $.get('alarms', function (newDataArray) {
            var response = JSON.parse(newDataArray);
            var notify = false;
            for (var i = 0; i < response.length; i++) {
                if (response[i].State == "UNACK_ALM")
                    notify = true;
            }

            $('#alarms').dataTable({
                stateSave: true,
                data: response,
                columns: [
                { data: 'Time' },
                { data: 'Priority' },
                { data: 'State' },
                { data: 'TagName' },
                { data: 'Description' },
                { data: 'Value' },
                { data: 'Operator' }
                ],
                order: [[1, "asc"]], // Sort by first column descending
                lengthMenu: [[25, 50, -1], [25, 50, "All"]],
                rowCallback: function (row, data, index) {
                    if (data.Priority <= 250) {
                        if (data.State == "UNACK_ALM") {
                            $(row).addClass("Cat1UnAck");
                        }
                        else {
                            $(row).addClass("Cat1Ack");
                        }
                    }
                    else if (data.Priority <= 500) {
                        if (data.State == "UNACK_ALM") {
                            $(row).addClass("Cat2UnAck");
                        }
                        else {
                            $(row).addClass("Cat2Ack");
                        }
                    }
                    else if (data.Priority <= 750) {
                        if (data.State == "UNACK_ALM") {
                            $(row).addClass("Cat3UnAck");
                        }
                        else {
                            $(row).addClass("Cat3Ack");
                        }
                    }
                    else if (data.Priority <= 999) {
                        if (data.State == "UNACK_ALM") {
                            $(row).addClass("Cat4UnAck");
                        }
                        else {
                            $(row).addClass("Cat4Ack");
                        }
                    }
                }
            });

            if (notify)
                doNotification();
        });

        //TODO: jQuery this
        var ajax_call = function () {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    processAlarms(this);
                }
            };
            xhttp.open("GET", "alarms", true);
            xhttp.send();
        }

        function processAlarms(xhttp) {
            var response = JSON.parse(xhttp.response);
            var notify = false;
            for (var i = 0; i < response.length; i++) {
                if (response[i].State == "UNACK_ALM")
                    notify = true;
            }

            var datatable = $('#alarms').dataTable().api();
            datatable.clear();
            datatable.rows.add(response);
            datatable.draw();

            if (notify)
                doNotification();
        }

        function doNotification() {
            return;
            Push.create('Unacknowledged Alarms Present!', {
                body: 'There is an unacknowledged alarm!',
                //icon: 'icon.png',
                timeout: 10000,
                onClick: function () {
                    window.focus();
                    this.close();
                },
                vibrate: [200, 100, 200, 100, 200, 100, 200]
            });
        }

        var interval = 1000 * 60 * 0.5; // where X is your every X minutes
        setInterval(ajax_call, interval);
    </script>
</body>
</html>